<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <%--<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />--%>
    <title>后台-首页</title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }

        .header{
            width: 100%;
            padding: 0px 50px 0px 20px;
        }

        .header > img {
            padding: 10px 0px 10px 0px;
        }

        .user-icon{
            cursor: pointer;
            float: right;
            height: 70px;
            box-sizing: border-box;
            padding: 10px 0px 10px 0px;
            /*position: relative;*/
        }

        .user-name{
            font-size: 16px;
            line-height: 50px;
            font-family: 微软雅黑;
            color: #FFFFFF;
        }

        #userOperate{
            display: none;
            cursor: pointer;
            position: absolute;
            width: 137px;
            background-color: #fff;
            right: 50px;
            box-sizing: border-box;
            border: 1px solid #CCCCCC;
        }

        #userOperate > a{
            width: 100%;
            text-align: center;
            font-size: 16px;
            color: #303030;
            line-height: 40px;
            font-family: 微软雅黑;
            z-index: 100;
            margin-bottom: 0px;
            display: inline-block;
        }
        #userOperate > a:hover{
            color: #337ab7;
            text-decoration: none;
        }

        .menu-list-title{
            height: 50px;
            background-color: #e3e3e3;
            color: #7a7a7a;
            padding-left: 10px;
            line-height: 49px;
            font-size: 18px;
            margin: 0px -14px 0px -15px;
            font-family: "微软雅黑 Light";
        }

        .menu-list{
            border-top: none;
        }

        .panel,.panel-default{
            border: none !important;
            margin: 0px -15px 0px -15px !important;
        }
        .panel > p{
            color: #464646;
            text-decoration: none;
            line-height: 50px;
            background-color: #fff;
            display: inline-block;
            width: 100%;
            margin-bottom: 0px;
            cursor: pointer;
            font-size: 16px;
            font-family: 微软雅黑;
            border-left:7px solid transparent;
            border-bottom: 1px solid #cecece;
            padding: 0px 20px 0px 30px;
        }
        .panel > p > .collapse-right-icon{
            float: right;
            line-height: 50px;
            color: #9f9f9f;
        }
        .panel > p > .collapse-left-icon{
            color: #337ab7;
        }

        .panel-group > .panel > .panel-active-p{
            color: #ffffff;
            background-color: #337ab7;
            border-left-color:#ff8f03;
        }

        .menu-list-sub li{
            padding-left: 40px;
            line-height: 40px;
            color: #7a7a7a;
            font-family: 微软雅黑;
            cursor: pointer;
        }
        .menu-list-sub li > i{
            font-size: 10px;
            line-height: 40px;
            color: #337ab7;
        }
        .menu-list-sub{
            border-bottom: 1px solid #cecece;
            margin-bottom: 0px;
        }
        .menu-list-sub > li > a:hover{
            text-decoration: none;
        }
        .panel-body{
            font-family: 微软雅黑;
        }

        .frame-content{
            height: 0px;
            border-left: 1px solid #CCC;
            position: relative;
        }
        .iframe-wrapper{
            height: 100%;
        }
        #rightModel{
            width: 100%;
            height: 100%;
        }
        .footer{
            width: 100%;
            height: 32px;
            border: 1px solid #337ab7;
            border-left: none;
            border-right: none;
            box-sizing: border-box;
            border-bottom: 2px solid #337ab7;
            position: fixed;
            bottom: 0px;
            padding-left: 20px;
            padding-right: 10px;
            background-color: #fff;
        }
        .version-icon{
            font-size: 18px;
            float: left;
            padding-top: 5px;
        }
        .footer strong{
            font-size: 14px;
            color: #7a7a7a;
            display: inline-block;
            margin-left: 6px;
            line-height: 28px;
        }
    </style>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" />
</head>
<body>
    <div class="wrapper">
    <%--头部区--%>
    <div class="header bg-primary ">
        <img src="${pageContext.request.contextPath}/images/logo-icon-small.png" alt="" class="">
        <div class="user-icon">
            <img class="img-circle" width="50px" height="50px" src="${pageContext.request.contextPath}/images/user-icon.png" alt="">
            <span class="user-name">&nbsp;&nbsp;&nbsp;方立勋&nbsp;<i class="glyphicon glyphicon-menu-down"></i></span>
        </div>
    </div>
    <%--主体区--%>
    <div class="container-fluid main">
        <div class="row">
            <%--左侧菜单项--%>
            <div class="col-md-2 menu-list">
                <div class="text-left menu-list-title">
                    <i class="glyphicon glyphicon-list"></i>&nbsp;&nbsp;菜单列表
                </div>
                <div class="panel-group" id="accordion">
                    <div class="panel panel-default">
                        <p class="panel-active-p" href="#collapseOne" data-toggle="collapse" data-parent="#accordion">
                            <i style="color: #FFF;" class="glyphicon glyphicon-search collapse-left-icon"></i>&nbsp;&nbsp;&nbsp;信息查询
                            <i style="color: #FFF;" class="glyphicon glyphicon-menu-right collapse-right-icon"></i>
                        </p>
                        <div id="collapseOne" class="panel-collapse collapse">
                            <ul class="panel-body list-unstyled menu-list-sub">
                                <li>
                                    <i class="glyphicon glyphicon-menu-right"></i>&nbsp;<a onclick="changeIframeSrc('ClassTable')">班级课表</a>
                                </li>
                                <li>
                                    <i class="glyphicon glyphicon-menu-right"></i>&nbsp;<a onclick="changeIframeSrc('echart.jsp')">个人考勤</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <p href="#collapseTwo" data-toggle="collapse" data-parent="#accordion">
                            <i class="glyphicon glyphicon-edit collapse-left-icon"></i>&nbsp;&nbsp;&nbsp;考勤申诉
                            <i class="glyphicon glyphicon-menu-right collapse-right-icon"></i>
                        </p>
                        <div id="collapseTwo" class="panel-collapse collapse">
                            <div class="panel-body">
                                暂未开发
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <%--右侧内容展示--%>
            <div class="col-md-10 frame-content">
                <%--用户的操作菜单,放在头部会产生失效问题--%>
                <div id="userOperate">
                    <a href="#"><i class="glyphicon glyphicon-wrench"></i>&nbsp;&nbsp;修改密码</a>
                    <a href="/login"><i class="glyphicon glyphicon-off"></i>&nbsp;&nbsp;退出系统</a>
                </div>
                <%--
                    frameborder:是否添加边框
                    scrolling:是否显示滚动条
                    src:要指向的url(你的jsp页面)
                --%>
                <div class="iframe-wrapper panel panel-default">
                    <iframe name="content-target" id="rightModel" class="content" frameborder="0" scrolling="true" src="${pageContext.request.contextPath}/loading3.jsp">
                        <%--用户浏览器不支持iframe时显示--%>
                        您的浏览器不支持此系统
                    </iframe>
                </div>
            </div>
        </div>
    </div>
    <%--版权区--%>
    <div class="footer">
        <i class="glyphicon glyphicon-info-sign text-primary version-icon"></i>
        <strong>课务管理系统&nbsp;V1.0</strong>
        <strong class="pull-right">CopyRight&nbsp;&nbsp;2017&nbsp;&nbsp;ZZF&WYC&nbsp;版权所有</strong>
    </div>
    </div>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <script>
        /*初始化主体区高度*/
        var initMainHeight = function() {
            $(".menu-list").css("height",document.documentElement.clientHeight-102);
            $(".frame-content").css("height",document.documentElement.clientHeight-102);
        }
        /*改变iframe指向的url*/
        var changeIframeSrc = function(url) {
            $("#rightModel").attr("src",url);
        }
        $(function () {
            /*首次加载*/
            initMainHeight();

            /*窗口变化*/
            $(window).resize(function() {
                initMainHeight();
            })

            /*外部引用处理*/
            setTimeout(initMainHeight,1000);
            /*列表菜单*/
            $(".panel").find("p").click(function() {
                $(this).parent().siblings().find("p").find(".collapse-left-icon").css("color","#337ab7");
                $(this).parent().siblings().find("p").find(".collapse-right-icon").css("color","#9f9f9f");
                $(this).find("i").css("color","#FFF");
                $(this).addClass("panel-active-p").parent().siblings().find("p").removeClass("panel-active-p");
            });
            /*用户操作项*/
            $("#userOperate").hover(function() {
                $(this).show();
            },function() {
                $(this).hide();
            })

            $(".user-icon").hover(function() {
                $("#userOperate").show();
            },function() {
                $("#userOperate").hide();
            })
        });
    </script>
</body>
</html>
